<template>

  <el-row>
    <el-col :span="6"><div class="grid-content bg-purple">
        <div>

          <el-tree
            @node-click="Disname"
            :data="data"
            :default-expand-all="flag"
            :node-key="defaultProps.id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :expand-on-click-node="expandonclicknode"
          >
          </el-tree>

        </div>
    </div>
    </el-col>

    <el-col :span="18">
      <div class="grid-content bg-purple-light">

        <el-button type="success" :disabled="isky" @click="baocunfanwei">保存范围</el-button>


      <baidu-map :center="center"
                 :zoom="zoom"
                 style="height:1080px"
                 scroll-wheel-zoom="scroll-wheel-zoom">
        <!--距离尺-->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!--        地图转换-->
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>

<!--        标记点  -->
        <bm-marker :position="center" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label :content="content" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>

<!--        多边形-->
<!--           <bm-polygon  :path="polygonPath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolygonPath"/>-->

<!--        圆形-->
        <bm-circle :center="circlePath.center" :radius="circlePath.radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="updateCirclePath" :editing="true"></bm-circle>


      </baidu-map>




    </div></el-col>
  </el-row>

</template>



<script>


import {savejgfw} from "../../../api/agency";

export default {
  data() {
    return {
      //是否在点击节点的时候展开或者收缩节点，
      // 默认值为 true，如果为 false，
      // 则只有点箭头图标的时候才会展开或者收缩节点。
      expandonclicknode:false,
      //是否默认展开所有节点
      flag: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },

      //点击编辑范围根据所选机构的id去数据库查询数据
      //点击保存是获取数据保存到数据库
      //多边形
      // polygonPath:[
      //   {lng: 116.412732, lat: 39.911707},
      //   {lng: 116.39455, lat: 39.910932},
      //   {lng: 116.403461, lat: 39.921336}],

       //把坐标做成活的
      center: {lng: 104.052642, lat:30.587787},
      zoom: 5,
      id:"",
      //覆盖范围半径 分公司为80000  一级转运中心为40000   二级转运中心为20000 网点为5000
      content:"品达物流集团有限公司",

      isky:true,

      //圆形
      circlePath: {
        center: {
          lng: 104.052642,
          lat: 30.587787
        },
        radius: 2800000
      },

    };


  },


  mounted() {
    this.getMenus();
  },


  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl('/auth/coreorg/list/tree'),
        method: 'get',
      }).then(({data}) => {
        this.data = data.page;
        console.log("成功获取数据...", data);
      });
    },


    //点击某一机构根据id查询机构作业发范围
    Disname(e){


      this.circlePath.center.lat = e.latitude+""
      this.circlePath.center.lng = e.longitude+""
      this.circlePath.radius = e.coreOrgRadius

      console.log(this.circlePath.radius)

      //   //机构经纬度
      this.center.lat = e.latitude+""
      this.center.lng = e.longitude+""

      //存储id后面保存机构作业范围要用
      this.id = e.id

      //机构级别
      this.jigoujibie = e.orgType
      //覆盖范围半径 分公司为80000  一级转运中心为40000   二级转运中心为20000 网点为5000
      if(this.jigoujibie==1){
        this.zoom = 7
      }else if (this.jigoujibie==2){
        this.zoom = 9
      }else if(this.jigoujibie==3){
        this.zoom = 11
      }else if(this.jigoujibie==4){
        this.zoom = 13
      }else if(this.jigoujibie==0){
        this.zoom = 5
      }
      //机构名称
      this.content = e.name

      this.isky=false
    },



    //保存范围
    baocunfanwei(){
      //获取机构作业半径
      var jgzybj1 =parseFloat(this.circlePath.radius) .toFixed(3);
     let jgzybj =  jgzybj1.substring(0,jgzybj1-1)

      //获取位置经度
     var jgjd = this.circlePath.center.lat;
      //获取位置纬度
      var jgwd = this.circlePath.center.lng;

      //获取到机构编号
      var jgbh = this.id;

      console.log(jgzybj)
      console.log(jgjd)
      console.log(jgwd)
      console.log(jgbh)

      let params = {
        'jgzybj':jgzybj,
        'jgjd': jgjd,
        'jgwd': jgwd,
        'jgbh': jgbh
      }

      savejgfw(params).then(({data}) => {
        console.log(data)
        this.isky=false
      });





    },


    updateCirclePath (e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()

    },

  },
};
</script>
